<template>
  <div>
    <div class="outdiv biaoti">保单管理</div>
    <hr style="height:1px;border: none;border-top:1px solid #ddd;margin:15px 0;">
<div class="outdiv">
    <el-input @clear="getData" clearable v-model="input" style='width: 20rem;margin-right:2rem' placeholder="输入手机号搜索"/><!--输入框-->
    <el-button @click="chaxunkh" icon="el-icon-search" type="primary" plain circle></el-button><!--查询按钮-->
    <el-button style="margin-left: 1.5rem" icon="el-icon-plus" type="danger" plain circle @click="tianjia"></el-button>
    
    <div class="xiajuli shangjuli">
    <el-table
            :data="tableData"
            style="width: 100%">
      <el-table-column
              label="被保险人"
              prop="insure_man"
              width="120">
      </el-table-column>
      <el-table-column
              label="手机号"
              prop="user_phone"
              width="130">
      </el-table-column>
      <el-table-column
              label="交强起始日期"
              prop="high_stime">
      </el-table-column>
      <el-table-column
              label="交强终止日期"
              prop="high_ltime">
      </el-table-column>
      <el-table-column
              label="商业起始日期"
              prop="business_ftime">
      </el-table-column>
      <el-table-column
              label="商业终止日期"
              prop="business_ltime">
      </el-table-column>
      <el-table-column align="right" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" plain circle icon="el-icon-s-grid" @click="open(scope.row)"></el-button>
          <el-button type="danger" plain circle icon="el-icon-edit"  @click="handl(scope.row)"></el-button>
        </template>
      </el-table-column>
    </el-table></div>
    <!--分页-->
    <el-pagination style="text-align: center"
                   :current-page="elPage" v-model="biaogeData"
                   @current-change='changePage'
                   background
                   :page-size='5'
                   layout="prev, pager, next"
                   :total="biaogeData.length">
    </el-pagination>
</div>

    <el-dialog title="修改客户信息" :visible.sync="dialogFormVisible"><!--修改客户信息弹框-->
      <el-form :model="form">
        <el-form-item label="名字" label-width="200">
          <el-input v-model="form.user_name" autocomplete="off" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="手机号" label-width="200">
          <el-input @blur="chaxunhaoma" v-model="form.user_phone" autocomplete="off"
                    placeholder="请输入手机号"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="quxiao">取 消</el-button>
        <el-button @click="qdadd" type="primary">提交</el-button>
      </div>
    </el-dialog>

    <el-dialog title="添加保单" :visible.sync="dialogForm"><!--添加保单弹框-->
      <el-form :model="form">
        <el-form-item label="用户名字" label-width="200">
          <el-input v-model="form.user_name" autocomplete="off" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="手机号" label-width="200">
          <el-input
                  v-model="form.user_phone"
                  autocomplete="off"
                  placeholder="请输入手机号"
                  @blur="panDuancunzai">
          </el-input>
        </el-form-item>
        <el-form-item label="车牌号" label-width="200">
          <el-input v-model="form.insure_amount" autocomplete="off" placeholder="请输入车牌号"></el-input>
        </el-form-item>
        <el-form-item label="保险公司" label-width="200">
          <el-select label="保险公司" v-model="form.insurance_com_id" placeholder="请选择">
            <el-option
                    v-for="item in baoxiandata"
                    :key="item.values"
                    :label="item.labels"
                    :value="item.values"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="交强保单号" label-width="200">
          <el-input v-model="form.high_insurance" autocomplete="off" placeholder="请输入交强保单号"></el-input>
        </el-form-item>
        <el-form-item label="商业保单号" label-width="200">
          <el-input v-model="form.business_insurance" autocomplete="off" placeholder="请输入商业保单号"></el-input>
        </el-form-item>
        <el-form-item label="交强起始日期" label-width="200">
          <el-date-picker type="datetime" placeholder="选择日期" v-model="form.high_stime"
                          autocomplete="off" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
        </el-form-item>
        <el-form-item label="交强终止日期" label-width="200">
          <el-date-picker type="datetime" placeholder="选择日期" v-model="form.high_ltime"
                          autocomplete="off" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
        </el-form-item>
        <el-form-item label="商业起始日期" label-width="200">
          <el-date-picker type="datetime" placeholder="选择日期" v-model="form.business_ftime"
                          autocomplete="off" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
        </el-form-item>
        <el-form-item label="商业终止日期" label-width="200">
          <el-date-picker type="datetime" placeholder="选择日期" v-model="form.business_ltime"
                          autocomplete="off" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
        </el-form-item>
      </el-form>
      <el-form>
        <p>保单险种</p>
        <el-form-item label="交强险" label-width="200">
          <el-input v-model="xianzhong[0].baoxiane" placeholder="保额(元)" style="width: 150px"></el-input>
          <el-input style="float: left;width: 150px" v-model="xianzhong[0].baofei"
                    placeholder="保费金额(元)"></el-input>
          <el-checkbox v-model="xianzhong[0].checked">不计免赔</el-checkbox>
        </el-form-item>
        <el-form-item label="车船税" label-width="200">
          <el-input v-model="xianzhong[1].baoxiane" placeholder="保额(元)" style="width: 150px"></el-input>
          <el-input style="float: left;width: 150px" v-model="xianzhong[1].baofei"
                    placeholder="保费金额(元)"></el-input>
          <el-checkbox v-model="xianzhong[1].checked">不计免赔</el-checkbox>
        </el-form-item>
        <el-form-item label="车辆损失险" label-width="200">
          <el-input v-model="xianzhong[2].baoxiane" placeholder="保额(元)" style="width: 150px"></el-input>
          <el-input style="float: left;width: 150px" v-model="xianzhong[2].baofei"
                    placeholder="保费金额(元)"></el-input>
          <el-checkbox v-model="xianzhong[2].checked">不计免赔</el-checkbox>
        </el-form-item>
        <el-form-item label="第三责任险" label-width="200">
          <el-input v-model="xianzhong[3].baoxiane" placeholder="保额(元)" style="width: 150px"></el-input>
          <el-input style="float: left;width: 150px" v-model="xianzhong[3].baofei"
                    placeholder="保费金额(元)"></el-input>
          <el-checkbox v-model="xianzhong[3].checked">不计免赔</el-checkbox>
        </el-form-item>
        <el-form-item label="司机责任险" label-width="200">
          <el-input v-model="xianzhong[4].baoxiane" placeholder="保额(元)" style="width: 150px"></el-input>
          <el-input style="float: left;width: 150px" v-model="xianzhong[4].baofei"
                    placeholder="保费金额(元)"></el-input>
          <el-checkbox v-model="xianzhong[4].checked">不计免赔</el-checkbox>
        </el-form-item>
        <el-form-item label="乘客责任险" label-width="200">
          <el-input v-model="xianzhong[5].baoxiane" placeholder="保额(元)" style="width: 150px"></el-input>
          <el-input style="float: left;width: 150px" v-model="xianzhong[5].baofei"
                    placeholder="保费金额(元)"></el-input>
          <el-checkbox v-model="xianzhong[5].checked">不计免赔</el-checkbox>
        </el-form-item>
        <el-form-item label="玻璃单独破碎险" label-width="200">
          <el-input v-model="xianzhong[6].baoxiane" placeholder="保额(元)" style="width: 150px"></el-input>
          <el-input style="float: left;width: 150px" v-model="xianzhong[6].baofei"
                    placeholder="保费金额(元)"></el-input>
          <el-checkbox v-model="xianzhong[6].checked">不计免赔</el-checkbox>
        </el-form-item>
        <el-form-item label="机动车被盗险" label-width="200">
          <el-input v-model="xianzhong[7].baoxiane" placeholder="保额(元)" style="width: 150px"></el-input>
          <el-input style="float: left;width: 150px" v-model="xianzhong[7].baofei"
                    placeholder="保费金额(元)"></el-input>
          <el-checkbox v-model="xianzhong[7].checked">不计免赔</el-checkbox>
        </el-form-item>
        <el-form-item label="自燃损失险" label-width="200">
          <el-input v-model="xianzhong[8].baoxiane" placeholder="保额(元)" style="width: 150px"></el-input>
          <el-input style="float: left;width: 150px" v-model="xianzhong[8].baofei"
                    placeholder="保费金额(元)"></el-input>
          <el-checkbox v-model="xianzhong[8].checked">不计免赔</el-checkbox>
        </el-form-item>
        <el-form-item label="车身划痕损失险" label-width="200">
          <el-input v-model="xianzhong[9].baoxiane" placeholder="保额(元)" style="width: 150px"></el-input>
          <el-input style="float: left;width: 150px" v-model="xianzhong[9].baofei"
                    placeholder="保费金额(元)"></el-input>
          <el-checkbox v-model="xianzhong[9].checked">不计免赔</el-checkbox>
        </el-form-item>
        <el-form-item label="不计免赔险" label-width="200">
          <el-input v-model="xianzhong[10].baoxiane" placeholder="保额(元)" style="width: 150px"></el-input>
          <el-input style="float: left;width: 150px" v-model="xianzhong[10].baofei"
                    placeholder="保费金额(元)"></el-input>
          <el-checkbox v-model="xianzhong[10].checked">不计免赔</el-checkbox>
        </el-form-item>
        <el-form-item label="无法找到第三方特约险" label-width="200">
          <el-input v-model="xianzhong[11].baoxiane" placeholder="保额(元)" style="width: 150px"></el-input>
          <el-input style="float: left;width: 150px" v-model="xianzhong[11].baofei"
                    placeholder="保费金额(元)"></el-input>
          <el-checkbox v-model="xianzhong[11].checked">不计免赔</el-checkbox>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="qxadd()">取消</el-button>
        <el-button @click="quedin()" type="primary">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="查看信息" :visible.sync="dial">
      <el-form>
        <el-form-item label="用户名字" label-width="200">
          <el-input autocomplete="off" v-model="baoxianchakan.user_name" disabled></el-input>
        </el-form-item>
        <el-form-item label="手机号" label-width="200">
          <el-input  autocomplete="off" disabled v-model="baoxianchakan.user_phone"></el-input>
        </el-form-item>
        <el-form-item label="车牌号" label-width="200">
          <el-input v-model="baoxianchakan.car_license_num" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="保险公司" label-width="200">
          <el-input v-model="baoxianchakan.insurance_com_name" disabled></el-input>
        </el-form-item>
        <el-form-item label="交强保单号" label-width="200">
          <el-input v-model="baoxianchakan.high_insurance" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="商业保单号" label-width="200">
          <el-input v-model="baoxianchakan.business_insurance" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="交强起始日期" label-width="200">
          <el-input v-model="baoxianchakan.high_stime" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="交强终止日期" label-width="200">
          <el-input v-model="baoxianchakan.high_ltime" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="商业起始日期" label-width="200">
          <el-input v-model="baoxianchakan.business_ftime" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="商业终止日期" label-width="200">
          <el-input v-model="baoxianchakan.business_ltime" autocomplete="off" disabled></el-input>
        </el-form-item>
      </el-form>
      <p>保单险种</p>
      <el-form>
        <el-form-item :label="item.insure_name" label-width="200" v-for="item in chakanxianzhong" :key="item.insure_insurance_id">
          <el-input  autocomplete="off" :value="item.insure_premium" disabled></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dial = false">关闭</el-button>
  </span>
    </el-dialog>

  </div>
</template>
<script>
  import * as api from "../../utils/api"

  export default {
    name: 'baoxianguanli',
    data() {
      return {
        checked: true,
        input: '',
        elPage: 1,
        biaogeData: [],
        baodantijiao: [],
        baoxianchakan:{},
        xianzhong: [
          {insure_name_id: 1, baofei: '', baoxiane: '', checked: ''},/*交强险*/
          {insure_name_id: 2, baofei: '', baoxiane: '', checked: ''},/*车船税*/
          {insure_name_id: 9, baofei: '', baoxiane: '', checked: ''},/*车损险*/
          {insure_name_id: 3, baofei: '', baoxiane: '', checked: ''},/*第三方责任险*/
          {insure_name_id: 4, baofei: '', baoxiane: '', checked: ''},/*司机责任险*/
          {insure_name_id: 5, baofei: '', baoxiane: '', checked: ''},/*乘客责任险*/
          {insure_name_id: 6, baofei: '', baoxiane: '', checked: ''},/*玻璃险*/
          {insure_name_id: 7, baofei: '', baoxiane: '', checked: ''},/*机动车被盗险*/
          {insure_name_id: 8, baofei: '', baoxiane: '', checked: ''},/*自燃险*/
          {insure_name_id: 10, baofei: '', baoxiane: '', checked: ''},/*划痕险*/
          {insure_name_id: 11, baofei: '', baoxiane: '', checked: ''},/*不计免赔险*/
          {insure_name_id: 12, baofei: '', baoxiane: '', checked: ''},/*无法找到第三方险*/
        ],
        form: {
          user_id: '',
          user_name: '',
          user_phone: '',
          insurance_com_id: '',
          insurance_com_phone: '',
          insure_amount: '',
          high_insurance: '',
          business_insurance: '',
          high_stime: '',
          high_ltime: '',
          business_ftime: '',
          business_ltime: '',
          baofei: '',
          checked: 1,
        },
        dial: false,/*查看客户弹框默认关闭状态*/
        dialogFormVisible: false,/*修改客户信息弹框默认关闭状态*/
        dialogForm: false,/*添加保单弹框默认关闭状态*/
        baoxiandata: [],
        chakanxianzhong:[]
      }
    },
    computed: {/*分页*/
      tableData() {
        let startNum = (this.elPage - 1) * 5;
        let endNum = startNum + 5;
        let newData = this.biaogeData.slice(startNum, endNum);
        return newData
      }
    },
    /*请求数据*/
    /*加载完数据执行数控*/
    created() {
      this.getbaoxianOP();
      this.getBaoXianXiala();
    },
    methods: {
      /*保险公司渲染下拉*/
      getBaoXianXiala() {
        this.axios({
          url: api.GET_QUERYINSURANCE,
          method: 'get',
          params: {}
        }).then(data => {
          let a = data.data.data
          for (let i = 0; i < a.length; i++) {
            this.baoxiandata.push(
                    {values: a[i].insurance_com_id, labels: a[i].insurance_com_short_name})
          }
        })
      },
      /*查询客户===================================*/
      chaxunkh() {
        // console.log(this.input);
        this.axios({
          url: api.GET_QUERYUSER,
          method: 'get',
          params: {
            user_phone: this.input,
          },
        }).then(data => {
          // console.log(data)
          this.biaogeData = data.data.data;
          this.elPage = 1;
        })
      },
      /*分页*/
      changePage(val) {
        this.elPage = val
      },
      /*重置*/
      getData() {
        this.getbaoxianOP()
      },
      /*修改客户信息*/
      handl(row) {
        this.dialogFormVisible = true
        this.form.user_id = row.user_id
        this.form.user_name = row.insure_man
        this.form.user_phone = row.user_phone
        this.form.insurance_id = row.insurance_id
      },
      /*修改手机号判断-----------------------------------------*/
      chaxunhaoma() {
        this.axios({
          url: api.POST_JUDGEPHONE,
          method: 'post',
          params: {
            user_phone: this.form.user_phone,
          },
        }).then(data => {
          if (data.data.code === 200) {
            this.$message.error(data.data.msg);
          }
        })
      },
        /*渲染页面================================================*/
      getbaoxianOP() {
        this.biaogeData = []
        this.axios({
          url: api.GET_QUERYUSER,
          method: 'get',
          params: {}
        }).then(data => {
          this.biaogeData = data.data.data
        })
      },
      /*修改客户确定按钮-----------------------------------------*/
      qdadd() {
        this.dialogFormVisible = false;
        this.axios({
          url: api.POST_EDITUSER,
          method: 'post',
          data: {
            insurance_id: this.form.insurance_id,
            user_id: this.form.user_id,
            user_name: this.form.user_name,
            user_phone: this.form.user_phone,
          },
        }).then(data => {
          if (data.data.code === 200) {
            this.getbaoxianOP();
          } else {
            this.$message({
              type: 'error',
              message: '修改失败'
            });
          }
        })
      },
    
      /*修改客户信息取消按钮------------------------------*/
      quxiao() {
        this.dialogFormVisible = false
      },
      /*查看客户信息---------------------------------------------*/
      open(row) {
        this.chakanxianzhong=[]
        // console.log(12121)
        // console.log(row)
        this.dial = true
        this.axios({
          url: api.GET_ALLINFORMA,
          method: 'get',
          params: {
            insurance_id: row.insurance_id,
            user_id: row.user_id
          }
        }).then(data => {
          this.baoxianchakan = data.data.data[0]
          console.log(data)
          for (let i=1;i<data.data.data.length;i++){
            this.chakanxianzhong.push(data.data.data[i])
          }
          // console.log(this.chakanxianzhong)
        })
      },
      /*查看客户信息关闭按钮-----------------------------------------*/
      guanbi() {
        this.dial = false
      },
      /*添加客户信息=================================================*/
      tianjia() {
        this.dialogForm = true
        this.form = {
          user_id: '',
          user_name: '',
          user_phone: '',
          insurance_com_id: '',
          insurance_com_phone: '',
          insure_amount: '',
          high_insurance: '',
          business_insurance: '',
          high_stime: '',
          high_ltime: '',
          business_ftime: '',
          business_ltime: '',
          baoxiane: '',
          baofei: '',
          checked: '',
        }
      },
      /*车牌号判断=============================================*/
      panDuancunzai() {
        this.axios({
          url: api.GET_DELETEUSER,
          method: 'get',
          params: {
            user_phone: this.form.user_phone,
            user_name: this.form.user_name,
          },
        }).then(data => {
          // console.log(data)
          if (data.data.code === 200) {
            this.form.insure_amount = data.data.data[0].car_license_num;
          }else{
            alert('请先添加车主卡');
            this.dialogForm = false;
          }
        })
      },
      /*添加客户确定按钮*===============================================*/
      quedin() {
        // console.log(this.xianzhong)
        this.dialogForm = false;
        // console.log(this.form.user_name.toString());
        // console.log(this.form.user_phone.toString());
        for (let i = 0; i < this.xianzhong.length; i++) {
          if (this.xianzhong[i].baofei != '' && this.xianzhong[i].baoxiane != '') {
            if (this.xianzhong[i].checked) {
              this.baodantijiao.push(
                      {
                        insure_name_id: this.xianzhong[i].insure_name_id,
                        baofei: this.xianzhong[i].baofei,
                        baoxiane: this.xianzhong[i].baoxiane,
                        checked: 1
                      })

            } else {
              this.baodantijiao.push(
                      {
                        insure_name_id: this.xianzhong[i].insure_name_id,
                        baofei: this.xianzhong[i].baofei,
                        baoxiane: this.xianzhong[i].baoxiane,
                        checked: 2
                      })
            }

          }
        }
        // console.log(typeof this.baodantijiao[0].baoxiane)
        // console.log(typeof this.baodantijiao[0].baofei)
        this.axios({
          url: api.POST_ADDUSER,
          method: "post",
          data: {
            user_id: this.user_id,
            user_name: this.form.user_name,
            user_phone: this.form.user_phone,
            insure_amount: this.form.insure_amount,
            insurance_com_id: this.form.insurance_com_id,
            high_insurance: this.form.high_insurance,
            business_insurance: this.form.business_insurance,
            high_stime: this.form.high_stime,
            high_ltime: this.form.high_ltime,
            business_ftime: this.form.business_ftime,
            business_ltime: this.form.business_ltime,
            baodanXinxi: this.baodantijiao

          }
        }).then(data => {
          // console.log(data)
          if (data.data.code === 200) {
            this.$message({
              type: 'success',
              message: data.data.msg
            });
            this.getbaoxianOP();
          }
        })
      },
      /*添加客户取消按钮*/
      qxadd() {
        this.dialogForm = false
      },
    },
  }
</script>
<style scoped lang="less">
  /deep/.el-table th>.cell {
    text-align: center;
  }

  /deep/.el-table .cell {
    text-align: center;
  }
</style>